import { useRouter } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import { breadcrumbConfig } from '@/router'

export function useBreadcrumb() {
  const router = useRouter()
  const currentRoute = router.currentRoute
  const breadcrumb = ref<
    Array<{
      name: string
      path?: string
    }>
  >([])

  const buildBreadcrumb = () => {
    breadcrumb.value = []
    breadcrumb.value = breadcrumbConfig.get(currentRoute.value.path)!(currentRoute.value)
  }

  watch(currentRoute, buildBreadcrumb)
  onMounted(() => {
    buildBreadcrumb()
  })

  return { breadcrumb }
}
